<!DOCTYPE html>
<html lang="en" ng-app="app" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>TERM-后台管理系统</title>
    <link th:href="@{/static/images/term.ico}" th:mce_href="images/tab_icon.ico" rel="icon" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/lib/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/lib/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/lib/project.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="/static/lib/bootstrapValidator.min.css"/>
    <style>
        .iframe-context{
            width: 100%;
            position: absolute;
            top: 88px;
            left: 0;
        }
        .form-horizontal .form-group{
            margin: 37px 0 0 0;
        }
        button[type="button"]{
            margin-left: 199px;
            margin-top: 37px;
        }
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
            display: none !important;
        }
    </style>
</head>

<body ng-controller="roleController">
<div class="header" th:include="header"></div>
<div class="iframe-context">
    <form id="companyForm" class="form-horizontal" novalidate="novalidate" th:action="@{/term/role/add}" method="post">
        <div class="form-group">
            <label for="name" class="col-sm-1 control-label">角色</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" name="name" placeholder="角色" ng-model="postData.name"/>
            </div>
        </div>
        <div class="form-group">
            <label for="companyName" class="col-sm-1 control-label">所属公司</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" name="companyName" ng-model="postData.companyName" ng-focus="openModal($event)"/>
            </div>
        </div>
        <div class="form-group">
            <label for="remark" class="col-sm-1 control-label">备注</label>
            <div class="col-sm-3">
                <textarea class="form-control" name="remark" rows="3" ng-model="postData.remark"/>
            </div>
        </div>
        <input type="hidden" name="companyId" ng-model="postData.companyId"/>
        <button ng-if="!postData.id" ng-cloak="" type="button" class="btn btn-success" ng-click="create($event)">生&nbsp;&nbsp;&nbsp;
            &nbsp;成</button>
        <button ng-if="postData.id" ng-cloak="" type="button" class="btn btn-success" ng-click="update($event)">更&nbsp;&nbsp;&nbsp;
            &nbsp;新</button>
    </form>
</div>
<script type="text/ng-template" id="modal.html">
    <div class="dialog_header">
        <form>
            <input ng-model="postData.name" name="name" type="text"/>
            <button ng-click="search($event)">搜&nbsp;&nbsp;索</button>
            <input type="hidden" name="index"/>
            <input type="hidden" name="size"/>
        </form>
    </div>
    <div class="dialog_content">
        <div class="grid stModalScroll" index="postData.index" data="postData" array="items" method="post" url="'/term/company/query'" size="postData.size" tabindex="5000" style="overflow: hidden; outline: none;">
            <table>
                <tbody>
                <tr ng-repeat='item in items'>
                    <td style="width:5%;">
                        <input ng-model="$parent.selected" name="name" ng-checked="$parent.selected == item" ng-value="item" class="stRadio" type="radio"/>
                    </td>
                    <td style="width:60%;">
                        <!--<div ng-bind="item.id"></div>-->
                        <div ng-bind="item.name"></div>
                    </td>
                </tr>
                </tbody>
                <div ng-if="empty">无数据，请修改搜索条件搜索</div>
            </table>
        </div>
    </div>
    <div class="dialog_footer">
        <div class="ops">
            <a href="#" ng-click="cancel()">取&nbsp;&nbsp;消</a>
            <button ng-click="ok()">确认添加</button>
        </div>
    </div>
</script>
<script type="text/javascript" src="/static/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/lib/angular.min.js"></script>
<script type="text/javascript" src="/static/lib/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/static/lib/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="/static/lib/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="/static/js/ngPlugin-unCompress.4f7c7e4.js"></script>
<script type="text/javascript" th:inline="javascript">
    //    <![CDATA[
    var app = angular.module('app',['ngPlugin']);
    app.controller('roleController',['$scope','$http','ngSubmit', '$timeout', 'stModal', 'alert',function($scope, $http, ngSubmit, $timeout, stModal, alert){
        $scope.config = {
            format : 'hh:ii',
            min:0,
            minuteStep:1
        };
        $scope.postData = {
            id: '',
            name:'',
            companyName:'',
            companyId:'',
            remark:''
        };
        $(document).ready(function (e) {
            e.preventDefault;
            $('#companyForm').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields:{
                    name:{
                        message:'角色不能为空',
                        validators:{
                            notEmpty:{
                                message:'角色不能为空'
                            },
                            stringLength:{
                                min:1,
                                max:30,
                                message:'角色长度不少于1个字符、不超过30个字符'
                            }
                        }
                    },
                    companyName:{
                        message:'所属公司不能为空',
                        validators:{
                            notEmpty:{
                                message:'所属公司不能为空'
                            }
                        }
                    },
                }

            })
        });
        $scope.openModal = function(e) {
            stModal({
                templateUrl:'modal.html',
                controller:'modalController',
                resolve:{
                    items:function () {

                    }
                },
                ok:function (item) {
                    $scope.postData.companyName = item.name;
                },
                cancel:function () {

                }
            });
        };
        $scope.create = function ($event) {
            $event.preventDefault();
            angular.element($event.target).attr('disabled','disabled');
            if(!$('#companyForm').data('bootstrapValidator').isValid()) {
                alert.alert({
                    reason: '请检查表单填写是否正确',
                    message:'保存或编辑失败',
                    type: 'fail',
                    delay: '3'
                });
                angular.element($event.target).attr('disabled',false);
                angular.element($event.target).removeClass('disabled');
            } else {
                var url = angular.element($event.target).parents('form').attr('action');
                $http.post(url,$scope.postData).success(function (data) {
                            if(data.code == 0) {
                                data.detail = data.detail ? data.detail : data.reason;
                                alert.alert({
                                    reason: data.detail?data.detail:'此提示3秒后关闭',
                                    message: data.msg?data.msg:'保存或编辑成功',
                                    type: 'success',
                                    delay: '3'
                                });
                                setTimeout(function () {
                                    location.href = data.url;
                                }, 3);
                            }else {
                                data.detail = data.detail ? data.detail : data.reason;
                                alert.alert({
                                    reason: data.detail ? data.detail : '此提示3秒后关闭',
                                    message: data.msg ? data.msg : '保存或编辑失败',
                                    type: 'fail',
                                    delay: '3'
                                });
                                angular.element($event.target).attr('disabled',false);
                                angular.element($event.target).removeClass('disabled');
                            }
                        })
                        .error(function(data){
                            alert.alert({
                                reason: '此提示3秒后关闭',
                                message: '网络异常，请重试！',
                                type: 'fail',
                                delay: '3'
                            })
                            angular.element($event.target).attr('disabled',false);
                            angular.element($event.target).removeClass('disabled');
                        })
            }

        };

    }]);
    //区域弹出框controller
    app.controller('modalController', function ($scope, $timeout, $modalInstance, $http, alert, items) {
        $scope.postData = {'name': '', 'index': 1, 'size': 10};
        $scope.arguments= items ;
        $scope.items = [];
        $scope.url = '';
        $scope.selected = false;
        $scope.empty = false;
        $scope.search = function (event) {
            $scope.postData.index = 1;
            $scope.items = [];
            angular.element('.dialog_content .grid').niceScroll({
                cursorborder: '',
                cursorcolor: '#000',
                cursoropacitymax: '0.5'
            });
            var $this = angular.element(event.target).attr('disabled', 'disabled');
            $http.post('/term/company/query',$scope.postData).success(function (data) {
                $this.attr('disabled', false);
                if (data.code == 0) {
                    $scope.items = data.data;
                    $scope.postData.index += 1;
                    $scope.index = 'false';
                    angular.element('.dialog_content .grid').getNiceScroll().resize();
                    $scope.empty =false;
                } else if (data.code == 2) {
                    $scope.empty = true;
                }
            }).error(function () {
                $this.attr('disabled', false);
            })
        };
        $scope.index = 'false';
        $scope.checked = function (index) {
            $scope.index = index;
        };
        $scope.ok = function () {
            $modalInstance.close($scope.selected);
        };
        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    });

    //    ]]>
</script>
</body>
</html>